<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="../js/wap_meta.js" ></script>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.1.js" ></script>
		<link rel="stylesheet" href="../css/base.css" />
		<script type="text/javascript" src="../js/jquery.cookie.js" ></script>
		<script type="text/javascript" src="../js/link.js" ></script>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
			font-family: "微软雅黑";
		}
		
		body {
			background: #f0f0f0;
		}
		.title p{
			width: 750px;
			text-align: center;
			font-size: 34px;
			color: #004591;
			padding-top: 26px;
		}
		.back{
			position: absolute;
			top: 30px;
			left: 30px;
		}
		.content{
			position: absolute;
			top: 200px;
			padding-bottom: 100px;
		}
		.bar{
			position: relative;
			height: 90px;
		}
		.bar p{
			padding-top: 15px;
			padding-left: 30px;
			font-size: 32px;
			color: #333333;
		}
		.right{
			position: absolute;
			left: 240px;
			top: 15px;
		}
		.right input{
			font-size: 32px;
			color: #999999;
			border: 0;
			background: 0;
			width: 280px;
		}
		.line{
			position: absolute;
			left: 30px;
			width: 720px;
			top: 78px;
			height: 1px;
			background: #d0d0d0;
		}
		.comform{
			position: absolute;
			left: 30px;
			bottom: 100px;
		}
		.littleTitle{
			position: absolute;
			width: 750px;
			text-align: center;
			top: 130px;
			font-size: 32px;
			color: #0b52a1;
		}
		.send{
			/*position: absolute;
			top: 200px;
			left: 500px;*/
			width: 200px;
			height: 100px;
			
		}
		.shu{
			position: absolute;
			left: 530px;
			top: 78px;
			height: 90px;
			width: 1px;
			background: #d0d0d0;
		}
		.time{
			position: absolute;
			color: #004591;
			font-size: 32px;
			text-align: center;
			width: 220px;
			left: 530px;
			height: 70px;
			top: 80px;
			padding-top: 20px;
		}
	</style>
	<body>
		<div class="title">
			<p>公益护照申领</p>
			<img class="back" src="../img/activate/back.png" />
		</div>
		<div class="littleTitle">手机验证</div>
		<div class="content">
			<form id="searchForm">
				<div class="bar">
					<div class="left">
						<p>手机号码<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="name" type="text" placeholder="请输入手机号码">
					</div>
					<div class="line"></div>
				</div>
				<div class="bar">
					<div class="left">
						<p>验证码<font color='#FF3939'>*</font></p>
					</div>
					<div class="right">
						<input name="number" type="text" placeholder="请输入验证码">
					</div>
					<div class="line"></div>
				</div>
			</form>
			<div class="send">
				<div class="shu"></div>
				<div class="time" id="timeHolder">发送验证码</div>
				<div class="time" id="timer">(60)秒后重发</div>
			</div>
		</div>
		<img class="comform" src="../img/activate/next.png" />
		<script>
			$("#timer").hide();
			$(".comform").click(function(){
				if($("#searchForm [name='name']").val() == ""){
					alert("请输入手机号码");
					return;
				}
				if($("#searchForm [name='number']").val() == ""){
					alert("请输入验证码");
					return;
				}
				$.post(linkObj.checkCode,{mobile:$("#searchForm [name='name']").val(),code:$("#searchForm [name='number']").val()},function(data){
					if(data.code == 0){
						$.cookie("sn",data.data.sn);
						
						clearTimeout(t);
//						alert(data.data.sn)
						document.location = "id.html";
					}else{
						alert(data.message);
					}
				},'json')
			})
			
			$(".back").click(function(){
				clearTimeout(t);
				
				javascript:history.go(-1);
			})
			var t
			$("#timeHolder").click(function(){
				if($("#searchForm [name='name']").val() == ""){
					alert("请输入手机号码");
					return;
				}
				$.post(linkObj.sendCode,{mobile:$("#searchForm [name='name']").val()},function(data){
					if(data.code == 0){
						sendTime();
					}
				},'json')
			})
			var time = 60;
			function sendTime(){
				if(time == 0){
					time = 60;
					$("#timeHolder").show();
					$("#timer").hide();
					return;
				}
				$("#timeHolder").hide();
				$("#timer").show();
				$("#timer").html("("+time+")秒后重发");
				time --;
				t=setTimeout(sendTime,1000);
			}
		</script>
	</body>
</html>
